<%--
  Created by IntelliJ IDEA.
  User: zhao
  Date: 17-1-30
  Time: 下午4:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="/resource/js/main.js"></script>
    <script type="text/javascript" src="/resource/js/common.js"></script>

    <style>
        body,div,ul{margin:0px;padding:0px;}
        #container{
            width:1200px;
            margin:0 auto;
        }
        #Header{
            margin-bottom: 0px;
        }
        #Carousel{
            margin-top: 0px;
        }
        #Content{
            margin-top:20px;
        }
        #Footer{
            margin-top: 20px;
            background: yellow;
        }
        .clear{
            clear: both;
        }
        #daohan{
            width:40%;
        }
        #jcxy{

        }

        li{
            display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;
        }

    </style>
    <script type="text/javascript">
        var pageAmount;
        var pageNumber = 0;
        var pageSize = 20;
        var total;
        function nextPage() {
            console.log(pageNumber);
            pageNumber++;
            if (pageAmount<=pageNumber){
                $("#pageNext").hide();
            }else {
                $("#pageNext").show();
            }
            $("#newsList").empty();
            $.ajax("/news/getNewsJsonData.do?moduleId=${module.id}&pageNumber="+pageNumber+"&pageSize="+pageSize,{
                success:function (json) {
                    var data = json.data;
                    for (var i=0;i<data.length;i++){
                        addMedia($("#newsList"), data[i]);
                    }
                }
            })
        }
        function prevPage(){
            console.log(pageNumber);
            pageNumber--;
            if (0>=pageNumber){
                $("#pagePrev").hide();
            }else {
                $("#pagePrev").show();
            }
            $("#newsList").empty();
            $.ajax("/news/getNewsJsonData.do?moduleId=${module.id}&pageNumber="+pageNumber+"&pageSize="+pageSize,{
                success:function (json) {
                    var data = json.data;
                    for (var i=0;i<data.length;i++){
                        addMedia($("#newsList"), data[i]);
                    }
                }
            })
        }
        $(function () {
            //初始化导航栏
            initNav();
            $('#pagePrev').hide();
            $.ajax("/news/getNewsJsonData.do?moduleId=${module.id}&pageNumber="+pageNumber+"&pageSize="+pageSize,{
                success:function (json) {
                    var data = json.data;
                    total = json.total;
                    pageAmount=((total-1)/(pageSize+1));
                    for (var i=0;i<data.length;i++){
                        addMedia($("#newsList"), data[i]);
                    }

                }
            })
        })
    </script>
</head>
<body >
<div style="background-image:url('${pageContext.request.contextPath}/resource/img/bgimg.jpg')">
<div id="container">
    <jsp:include page="Head.jsp" />

    <div style="text-align:center;clear:both">

    </div>

    <div id="Content" class="row">
        <div id="content-left" style="float: left;width: 30%">
            <div id="daohan" style="float: left;width: 100%;padding-right: 10px">
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a href="/hello/index.do">Home</a></li>
                    <li role="presentation" class="active"><a href="#">${module.name}</a></li>
                </ul>
            </div>
        </div>
        <div id="content-main" style="float: left;width: 70%">

            <!--杰出校友模块-->
            <div id="jcxy" style="float: left;width: 100%;padding-left: 10px">

                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title" style="text-align: center">${module.name}</h4>
                    </div>
                    <div id="newsList" class="panel-body">


                    </div>
                </div>
                <div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li id="pagePrev" onclick="prevPage()" style="float: left;padding-left: 30px"><a href="#">Previous</a></li>
                            <li id="pageNext" onclick="nextPage()" style="float: right;padding-right: 30px"><a href="javascript:void (0)">Next</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>



    </div>
</div>
</div>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
<footer>
    <jsp:include page="footer.jsp"/>
</footer>
</html>
